import React from "react";
import ReactDOM from "react-dom";

// 组件的生命周期
// 更新时期

class App extends React.Component{
    // （1）最先执行,类似构造函数,可用于做初始化
    constructor(props){
        super(props)

        this.state = {
            count: 0
        }
        // console.warn('生命周期钩子函数: constructor')
    }

    handleClick = () => {
        this.setState({ // 导致组件更新
            count: this.state.count + 1
        })
        // // 强制更新, 导致组件更新
        // this.forceUpdate()
    }

    // 渲染ui
    render () {
        // console.warn('生命周期钩子函数: render')
        return (
            <div>
                <Counter count={this.state.count} />
                <button onClick={this.handleClick}>大大大</button>
            </div>
        )
    }
}

class Counter extends React.Component{
    render() {
        console.warn('子组件,生命周期钩子函数: render')
        return (
            <h1 id='title'>统计打豆豆的次数:{this.props.count}</h1>
        )
    }

    // 先render渲染后,再执行ta
    // 可以进行dom操作,发送网络请求
    // 如果要进行setState()要放在一个if操作中, 如果直接调用setState也会导致一直更新,进入无限递归
    componentDidUpdate(prevProps) {
        console.warn('子组件,生命周期钩子函数: componentDidUpdate')
    
        // const title = document.getElementById('title')
        // console.log(title.innerHTML)
        
        // 获得当次count的和上一次count进行比较,如果不同可以进行更新
        if (prevProps.count !== this.props.count) {
            this.setState({})
        }
    }
}

ReactDOM.render(<App />, document.getElementById('root'))